<script lang="ts" setup>
import mcht from '@/api/mcht'
import dayjs from 'dayjs'
import { useHomeStore } from '@/store'

const { mchtNo, shopId, roleFlag } = storeToRefs(useHomeStore())

const now = dayjs()
const minDate = now.subtract(3, 'month').toDate()
const maxDate = now.toDate()

const form = reactive({
  startDate: dayjs().subtract(6, 'day').format('YYYY-MM-DD'),
  endDate: dayjs().format('YYYY-MM-DD'),
  id: mchtNo.value,
  type: 'M',
  self: '0'
})
if (roleFlag.value === '02' || roleFlag.value === '03') {
  form.id = shopId.value
  form.type = 'S'
}
const countList = ref([])
const loading = ref<boolean>(false)
async function getSumOrders () {
  loading.value = true
  const pushData = {
    self: form.self,
    startDate: dayjs(form.startDate).format('YYYYMMDD'),
    endDate: dayjs(form.endDate).format('YYYYMMDD'),
  }
  if (form.type === 'M') {
    pushData.mchtNo = form.id
  } else {
    pushData.shopId = form.id
  }
  const { data } = await mcht.ecnySumQuery(pushData)
  loading.value = false
  if (data.status === 'success') {
    countList.value = data?.data.countList
  }
}
onMounted(() => {
  let result = [form.startDate, form.endDate]
    .filter(item => item)
    .join('/');
  if (!result) {
    result = '全部'
  }
  searchKey.value = result

  getSumOrders()
})
// watch(() => form.id, () => {
//   getSumOrders()
// })
// watch(() => form.startDate, () => {
//   getSumOrders()
// })
// watch(() => form.endDate, () => {
//   getSumOrders()
// })
// watch(() => form.self, () => {
//   getSumOrders()
// })

async function clickItem (item: any) {
  let url = ''
  if (form.type === 'M') {
    url = `/pages/home/ecnyorder/detail?date=${item.sysDate}&mchtNo=${form.id}&self=${form.self}`
  } else {
    url = `/pages/home/ecnyorder/detail?date=${item.sysDate}&shopId=${form.id}&self=${form.self}`
  }
  uni.navigateTo({
    url
  })
}

const popupMask = ref<boolean>(false)
const popupContainer = ref<boolean>(false)
const searchKey = ref<string>('全部')

function show_popup() {
  popupMask.value = true
  popupContainer.value = true
}

function hide_popup() {
  popupMask.value = false
  popupContainer.value = false
}

function searchList() {
  let result = [form.startDate, form.endDate, form.outputText]
    .filter(item => item)
    .join('/');
  if (!result) {
    result = '全部'
  }
  searchKey.value = result
  getSumOrders()
  hide_popup()
}
function clearSearchList() {
  // getSumOrders()
}
</script>

<template>

  <!-- 弹出框结构 -->
  <div class="li-popup">
    <div class="popup-mask" :class="popupMask ? 'popup-mask-show' : ''" @click="hide_popup">
    </div>
    <div class="popup-container" :class="popupContainer ? 'popup-container-show' : ''">
      <div class="popup-content">
        <div class="popup-body">
          <nut-form>
            <nut-form-item label="起始日期">
              <date-picker :min="minDate" :max="maxDate" v-model="form.startDate" title="申请起始日期" />
            </nut-form-item>
            <nut-form-item label="结束日期">
              <date-picker :min="minDate" :max="maxDate" v-model="form.endDate" title="申请结束日期" />
            </nut-form-item>
            <nut-form-item label="商户/门店">
              <store-casader v-model="form.id" v-model:type="form.type" v-model:self="form.self"
                v-model:outputText="form.outputText" :hiddenSelf="roleFlag === '01'"
                :disabled="roleFlag === '02' || roleFlag === '03'"></store-casader>
            </nut-form-item>
          </nut-form>
          <div class="li-searchBar-btn">
            <!-- <div class="li-cz shake_o" @click="hide_popup">取消</div> -->
            <div class="li-ss shake_o" @click="searchList">搜索</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="query">
    <div class="li-searchBar">
      <div class="li-rantangle">
        <div class="li-btnleft li-butStyle" :class="searchKey !== '全部' ? 'li-lftactive' : ''" @click="clearSearchList">
          <div class="li-texts">{{ searchKey }}</div>
        </div>
        <div class="li-btnright li-butStyle" :class="searchKey !== '全部' ? 'li-ritactive' : ''" @click="show_popup">筛选
        </div>
      </div>
    </div>
    <div style="width: 100%;height: 120rpx;"></div>
  </div>
  <div class="list">
    <nut-empty v-if="countList.length === 0" description="暂无数据"></nut-empty>
    <template v-else>
      <div class="list-box">
        <div class="li-bill-item" v-for="(item, index) in countList" :key="index" @click="clickItem(item)">
          <div class="li-bill-lft">
            <div class="i-ri:money-cny-circle-line money-icon"></div>
          </div>
          <div class="li-bill-cen">
            <div class="li-bill-cen-title">{{ dayjs(item.sysDate).format('MM/DD') }}</div>
            <div class="li-bill-cen-sub">当日共交易 <text style="color:#c9302c ;">{{ item.totalCount }}</text> 笔</div>
          </div>
          <div class="li-bill-rit"><nut-price :price="item.totalAmount" symbol="¥" /></div>
        </div>
      </div>
      <div class="end">没有更多数据了</div>
      <div class="loading" v-if="loading">
        <nut-icon name="loading"></nut-icon>
        数据加载中...
      </div>
    </template>
  </div>
</template>

<route lang="json">
{
  "layout": "home",
  "style": {
    "navigationBarTitleText": "数币订单查询",
    "backgroundColorContent": "#f1f1f1"
  }
}
</route>

<style lang="sass" scoped>
.list
  padding: 20rpx
  .end
    text-align: center
    color: #8e8e8e
  .loading
    text-align: center
    color: #8e8e8e
:deep(.nut-cell__value)
  flex: 3
// 加在页面里才生效
:deep(.nut-switch)
  min-width: 56px!important
:deep(.nut-switch-label.open)
  min-width: 56px!important
  transform: translateX(-13px)!important
:deep(.nut-switch-label.close)
  min-width: 56px!important
  transform: translateX(40px)!important
:deep(.nut-switch-open .nut-switch-button)
  transform: translateX(300%)!important

/* 筛选按钮相关 end */
:deep(.nut-cell-group__wrap)
  box-shadow: none!important
  margin: 0!important
  padding: 10rpx 0!important

:deep(.nut-cell-group .nut-cell::after)
  border-bottom: none

/* 金额列表相关 end */
:deep(.nut-price)
  color: #449d44!important

:deep(.nut-price--symbol-normal)
  font-size: 34rpx!important

:deep(.nut-price--normal)
  font-size: 32rpx!important

:deep(.nut-price--decimal-normal)
  font-size: 30rpx!important
</style>
